<body class="font-sans text-dark bg-white">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-custom bg-white/90 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center py-4">
        <!-- Logo -->
        <div class="flex items-center space-x-2">
          <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
            <i class="fa fa-snowflake-o text-white text-xl"></i>
          </div>
          <span class="text-xl font-bold text-dark">Snow</span>
        </div>

        <!-- 桌面导航 -->
        <nav class="hidden md:flex items-center space-x-8">
          <a href="#features" class="text-dark/80 hover:text-primary transition-custom">特性</a>
          <a href="#docs" class="text-dark/80 hover:text-primary transition-custom">文档</a>
          <a href="#download" class="text-dark/80 hover:text-primary transition-custom">下载</a>
          <a href="#community" class="text-dark/80 hover:text-primary transition-custom">社区</a>
          <a href="#contribute" class="text-dark/80 hover:text-primary transition-custom">贡献</a>
        </nav>

        <!-- 按钮组 -->
        <div class="hidden md:flex items-center space-x-4">
          <a href="https://gitee.com/jcnc-org/snow" target="_blank"
            class="px-4 py-2 rounded-md border border-primary text-primary hover:bg-primary/5 transition-custom">
            <i class="fa fa-git mr-1"></i> 仓库
          </a>
          <a href="#download"
            class="px-4 py-2 rounded-md bg-primary text-white hover:bg-primary/90 transition-custom shadow-md hover:shadow-lg">
            开始使用
          </a>
        </div>

        <!-- 移动端菜单按钮 -->
        <button id="menuBtn" class="md:hidden text-dark text-xl">
          <i class="fa fa-bars"></i>
        </button>
      </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div id="mobileMenu" class="md:hidden hidden bg-white border-t animate-fade-in">
      <div class="container mx-auto px-4 py-3 space-y-3">
        <a href="#features" class="block py-2 text-dark/80 hover:text-primary transition-custom">特性</a>
        <a href="#docs" class="block py-2 text-dark/80 hover:text-primary transition-custom">文档</a>
        <a href="#download" class="block py-2 text-dark/80 hover:text-primary transition-custom">下载</a>
        <a href="#community" class="block py-2 text-dark/80 hover:text-primary transition-custom">社区</a>
        <a href="#contribute" class="block py-2 text-dark/80 hover:text-primary transition-custom">贡献</a>
        <div class="flex flex-col space-y-3 pt-2 border-t">
          <a href="https://gitee.com/jcnc-org/snow" target="_blank"
            class="px-4 py-2 rounded-md border border-primary text-primary text-center hover:bg-primary/5 transition-custom">
            <i class="fa fa-git mr-1"></i> 仓库
          </a>
          <a href="#download"
            class="px-4 py-2 rounded-md bg-primary text-white text-center hover:bg-primary/90 transition-custom shadow-md">
            开始使用
          </a>
        </div>
      </div>
    </div>
  </header>